import React from "react";
import "./CardItemContent.css";

function CardItemContent(props: any) {
  const item = props.data;
  console.log("item", item);
  return (
    <div style={{ paddingLeft: 10, paddingRight: 15 }}>
      <div key={item.id}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 50,
              height: 30,
              borderRadius: 4,
              marginRight: 10,
              fontSize: 25,
              backgroundColor: "deeppink",
            }}
          >
            {item.id}
          </div>
          <h2>{item.name}</h2>
        </div>

        <div style={{ display: "flex" }}>
          <span style={{ fontSize: 16 }}>{item.sex}</span>
          <span style={{ marginLeft: 5, fontSize: 16 }}>{item.age}</span>
          <span style={{ marginLeft: 5, fontSize: 16 }}>{item.num}</span>
        </div>
        <div
          style={{
            display: "flex",
            marginTop: 5,
            justifyContent: "space-between",
          }}
        >
          <span>{item.category}</span>
          <span className="wei">危</span>
        </div>

        <div style={{ marginTop: 5 }}>
          <span>{item.way}</span>
        </div>
        <div style={{ marginTop: 5 }}>
          <span>{item.doctor}</span>
        </div>
        <div style={{ marginTop: 5 }}>
          <span>{item.time}</span>
        </div>
      </div>
    </div>
  );
}

export default CardItemContent;
